<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit"/>

    <title>feiynn | alfred2 workflow url</title>
    <link href="/open/themes/inspinia/css/bootstrap.css" rel="stylesheet">
    <link href="/open/themes/inspinia/font-awesome/css/font-awesome.css" rel="stylesheet">

    <!-- Data Tables -->
    <link href="/open/themes/inspinia/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="/open/themes/inspinia/css/plugins/dataTables/dataTables.responsive.css" rel="stylesheet">
    <link href="/open/themes/inspinia/css/plugins/dataTables/dataTables.tableTools.min.css" rel="stylesheet">
    <link href="/open/themes/inspinia/css/animate.css" rel="stylesheet">
    <link href="/open/themes/inspinia/css/style.css" rel="stylesheet">

    <link href="/open/themes/feiynn/css/cnFont.css" rel="stylesheet">
    <!-- Toastr style -->
    <link href="/open/themes/feiynn/toastr/toastr.min.css" rel="stylesheet">

</head>


<body class="top-navigation">

<div id="page-wrapper" class="white-bg">

    <div class="row border-bottom white-bg">
        <nav class="navbar navbar-static-top" role="navigation">
            <div class="navbar-header">
                <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse"
                        class="navbar-toggle collapsed" type="button">
                    <i class="fa fa-reorder"></i>
                </button>
                <a href="#" class="navbar-brand">xProject</a>
            </div>
            <div class="navbar-collapse collapse" id="navbar">
                <ul class="nav navbar-nav">
                    <li class="active"><a aria-expanded="false" role="button" href="/">Back Main</a></li>
                    <li class="dropdown"><a aria-expanded="false" role="button" href="#" class="dropdown-toggle"
                                            data-toggle="dropdown">
                        Menu item <span class="caret"></span>
                    </a>
                        <ul role="menu" class="dropdown-menu">
                            <li><a href="">Menu item</a></li>
                            <li><a href="">Menu item</a></li>
                            <li><a href="">Menu item</a></li>
                            <li><a href="">Menu item</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-top-links navbar-right">
                    <li><a href="login.html">
                        <i class="fa fa-sign-out"></i> Log out
                    </a></li>
                </ul>
            </div>
        </nav>
    </div>

    <div class="hr-line-dashed"></div>

    <div class="col-md-12">
        <div class="row">
            <div class="col-lg-12">

                <form id="myForm">
                    <table class="table table-striped table-bordered table-hover" id="myTable">
                        <thead>
                        <tr>
                            <th><input id="chkAll" type="checkbox"></th>
                            <th>keyword</th>
                            <th>url</th>
                            <th>desc</th>
                            <th>create_time</th>
                            <th>last_check_time</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </form>
                <div class="hr-line-dashed"></div>
                <p>
                    <button class="btn btn-primary" type="button" id="createModalBtn">add</button>
                    <button class="btn btn-primary" type="button" id="updateModalBtn">update</button>
                    <button class="btn btn-primary" type="button" id="deleteModalBtn">delete</button>
                </p>
            </div>
        </div>

        <div class="modal fade" id="saveOrUpdateModal" tabindex="-1" role="dialog"
             aria-labelledby="saveOrUpdateModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="saveOrUpdateModalLabel">添加新的记录</h4>
                    </div>
                    <div class="modal-body">
                        <form id="saveOrUpdateModalForm" class="form-horizontal">
                            <input type="hidden" name="id" id="id">
                            <div class="form-group">
                                <div class="row">
                                    <label class="col-sm-2 control-label"> keyword <span class="red_star">*</span>
                                    </label>
                                    <div class="col-sm-4">
                                        <input type="text" id="keyword" name="keyword" class="form-control"
                                               placeholder="">
                                    </div>
                                    <label class="col-sm-2 control-label"> url <span class="red_star">*</span>
                                    </label>
                                    <div class="col-sm-4">
                                        <input type="text" id="url" name="url" class="form-control" placeholder="">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <label class="col-sm-2 control-label"> desc <span class="red_star">*</span>
                                    </label>
                                    <div class="col-sm-4">
                                        <input type="text" id="desc" name="desc" class="form-control" placeholder="">
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="saveOrUpdateModalBtn" class="btn btn-primary"
                                data-loading-text="执行中...">确定
                        </button>
                        <button type="button" id="saveOrUpdateModalCloseBtn" class="btn btn-default"
                                data-dismiss="modal">关闭
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="deleteModalLabel">确定吗?</h4>
                    </div>
                    <div class="modal-body">
                        <form id="deleteModalForm" class="form-horizontal">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-12">这将删除所选记录</div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="deleteModalConfirmBtn" class="btn btn-primary"
                                data-loading-text="执行中...">确定
                        </button>
                        <button type="button" id="deleteModalCloseBtn" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Mainly scripts -->
<script type="text/javascript" src="/open/themes/inspinia/js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="/open/themes/inspinia/js/bootstrap.js"></script>
<script type="text/javascript" src="/open/themes/inspinia/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script type="text/javascript" src="/open/themes/inspinia/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

<!-- Custom and plugin javascript -->
<script type="text/javascript" src="/open/themes/inspinia/js/inspinia.js"></script>
<script type="text/javascript" src="/open/themes/inspinia/js/plugins/pace/pace.min.js"></script>
<script type="text/javascript" src="/open/themes/feiynn/js/feiynn.js"></script>

<!-- Toastr script -->
<script src="/open/themes/feiynn/toastr/toastr.min.js"></script>
<script src="/open/themes/feiynn/js/jquery.cookie.js"></script>

<!-- Data Tables -->
<script src="/open/themes/feiynn/DataTables-1.10.6/media/js/jquery.dataTables.js"></script>
<script src="/open/themes/inspinia/js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="/open/themes/inspinia/js/plugins/dataTables/dataTables.responsive.js"></script>
<script src="/open/themes/inspinia/js/plugins/dataTables/dataTables.tableTools.min.js"></script>
<script src="/open/themes/feiynn/My97DatePicker/WdatePicker.js"></script>

<script type="text/javascript" src="/open/themes/feiynn/mustache.js-master/mustache.js"></script>

<!-- the tmpl script,Start -->
<script type="text/javascript" src="/open/themes/feiynn/jquery-validation-1.13.1/dist/jquery.validate.js"></script>
<!-- the tmpl script,End -->

<script type="text/javascript">
    var myTableRef;
    var isValidate;
    var pageLength = 10;

    function configToastr() {
        toastr.options = {
            "closeButton": true,
            "debug": false,
            "progressBar": true,
            "positionClass": "toast-top-center",
            "onclick": null,
            "showDuration": "400",
            "hideDuration": "1000",
            "timeOut": "7000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        };
    }

    $(function () {

        $('#createModalBtn').on('click', function () {
            $('#id').val('');
            $('form#saveOrUpdateModalForm')[0].reset();
            $('#saveOrUpdateModal').modal({
                'backdrop': 'static'
            });
            //将模态框的标题修改为修改当前记录
            $("#saveOrUpdateModalLabel").text("添加新的记录");
        });

        $('#updateModalBtn').on('click', function () {

            var myCheckbox = $('input[name=myIds]:checked');

            if (myCheckbox.length != 1) {
                toastrInfo('请选择一条记录执行编辑操作');
                return;
            }

            var myTr = $(myCheckbox[0]).parents('tr')[0];
            var myData = myTableRef.row(myTr).data();

            $('#id').val(myData.id);

            $('#saveOrUpdateModal').modal({
                'backdrop': 'static'
            });

            //将模态框的标题修改为修改当前记录
            $("#saveOrUpdateModalLabel").text("编辑当前记录");

            //CONFIG VALUE HERE
            $('#url').val(myData.url);
            $('#keyword').val(myData.keyword);
            $('#desc').val(myData.desc);
        });

        $('#deleteModalBtn').on('click', function () {
            if ($('input[name=myIds]:checked').length == 0) {
                toastrInfo('至少选择一条记录来执行删除操作');
                return;
            }
            $('#deleteModal').modal({
                'backdrop': 'static'
            });
        });

        $("#chkAll").on("click", function () {
            $("input:checkbox").prop("checked", $(this).prop('checked'));
        });

        $('#saveOrUpdateModalBtn').on("click", function () {
            if (isValidate.form() == false) {
                return;
            }
            $('#saveOrUpdateModalBtn').button('loading');
            $.ajax({
                type: "POST",
                url: '/alfred/workflow/saveOrUpdateUrl',
                data: $("#saveOrUpdateModalForm").serialize(),
                cache: false,
                dataType: "json",
                timeout: 5000,
                success: function (r) {
                    $('#saveOrUpdateModalBtn').button('reset');
                    $('#saveOrUpdateModalCloseBtn').click();
                    if (r.ret == 0) {
                        myTableRef.ajax.reload();
                        toastrSuccess("操作成功");
                    } else {
                        ajaxError();
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $('#saveOrUpdateModalBtn').button('reset');
                }
            });
        });
        $("#mySearchFormResetBtn").on('click', function () {
            $("#mySearchForm")[0].reset();
        });
        isValidate = $("form#saveOrUpdateModalForm").validate({
            rules: {
                nonExistField: {
                    required: true
                },
                keyword: {
                    required: true
                },
                url: {
                    required: true
                },
                desc: {
                    required: true,
                    maxlength: 100
                }
            },
            messages: {
                nonExistField: {
                    required: "nonExistMessage"
                }
            }
        });

        $('#deleteModalConfirmBtn').on("click", function () {
            $(this).button('操作进行中...');
            $.ajax({
                type: "POST",
                url: '/alfred/workflow/deleteUrl',
                data: $("#myForm").serialize(),
                cache: false,
                dataType: "json",
                timeout: 5000,
                success: function (r) {
                    $('#deleteModalBtn').button('reset');
                    $('#deleteModalCloseBtn').click();
                    if (r.ret == 0) {
                        myTableRef.ajax.reload();
                        toastrSuccess("成功删除记录");
                    } else {
                        ajaxError();
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $('#deleteModalBtn').button('reset');
                    $('#deleteModalCloseBtn').click();
                    toastrError(r.msg);
                }
            });
        });

        $("#saveOrUpdateModalCloseBtn").on('click', function () {
            $("label.error").hide();
            $(".error").removeClass("error");
        });

        myTableRef = $('#myTable').DataTable({
            "pageLength": 10,
            "autoWidth": false,
            "processing": true,
            "serverSide": false,
            "deferRender": true,
            "paging": true,
            "filter": true,
            "lengthChange": true,
            "ordering": true,
            "orderClasses": true,
            "pagingType": "full_numbers",
            "info": true,
            "ajax": {
                "url": "/alfred/workflow/listAllUrl",
                "type": "POST",
                "dataType": 'json',
                "data": function (d) {
                    $('input#start').val(d.start);
                    $('input#length').val(d.length);
                    return $('#mySearchForm').serialize();
                }
            },
            "initComplete": function () {
            },
            "columns": [{
                "mData": function (source, type, val) {
                    return '<input id="myIds" name="myIds" value="' + source.id + '" type="checkbox">';
                }
            }, {
                "data": "keyword"
            }, {
                "data": "url"
            }, {
                "mData": function (source, type, val) {
                    return `${source.desc}`;
                }
            }, {
                "data": "create_time"
            }, {
                "data": "last_check_time"
            }],
            "columnDefs": [{
                "orderable": false,
                "width": '10%',
                "targets": 0
            }, {
                "width": '18%',
                "targets": [1, 2, 3, 4, 5]
            }]
        });
        //end datatable
        $('#mySearchFormBtn').on('click', function () {
            myTableRef.ajax.reload();
        });
    });
</script>
</body>


</html>